<template>

  <div class="app">
    <div style="margin-left: 40px;margin-top: 20px">
        <el-form :inline="true" class="search-form">
          <el-form-item label="手机号码:">
            <el-input v-model="state.searchCriteria.sjhm" placeholder="请输入号码" style="width: 150px" clearable></el-input>
          </el-form-item>
          <el-form-item label="Call ID:">
            <el-input v-model="state.searchCriteria.callid" placeholder="请输入callid" style="width: 150px" clearable>
            </el-input>
          </el-form-item>
          <el-form-item label="自定义标签:">
            <el-input v-model="state.searchCriteria.zdybq" placeholder="请输入自定义标签" style="width: 150px" clearable>
            </el-input>
          </el-form-item>
          <el-form-item label="号码MD5:">
            <el-input v-model="state.searchCriteria.hmmd5" placeholder="请输入号码MD5" style="width: 150px" clearable>
            </el-input>
          </el-form-item>
          <el-form-item label="通话时间:">
            <el-date-picker
                v-model="dateTime"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="defaultTime"
                clearable
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="load">
              <el-icon style="vertical-align: middle">
                <Search />
              </el-icon>
              <span style="vertical-align: middle">查询</span>
            </el-button>

          </el-form-item>
        </el-form>

      <el-table :data="state.tableData" >
        <el-table-column prop="rwid" label="任务ID" width="80px"></el-table-column>
        <el-table-column prop="hmid" label="号码ID" width="100px"></el-table-column>
        <el-table-column prop="rwmc" label="任务名称" width="150px"></el-table-column>
        <el-table-column prop="sjhm" label="手机号码" width="130px" ></el-table-column>
        <el-table-column prop="callid" label="Call ID" width="120px"></el-table-column>
        <el-table-column prop="hmmd5" label="号码MD5" width="160px"></el-table-column>
        <el-table-column prop="zdybq" label="自定义标签" width="110px"></el-table-column>
        <el-table-column prop="yytzsc" label="语音通知时长" width="155px" :formatter="row => formatDuration(row.yytzsc)"></el-table-column>
        <el-table-column prop="aithsc" label="AI通话时长" width="155px" :formatter="row => formatDuration(row.aithsc)"></el-table-column>
        <el-table-column prop="rgthsc" label="人工通话时长" width="155px" :formatter="row => formatDuration(row.rgthsc)"></el-table-column>
        <el-table-column prop="yxbq" label="意向标签" width="90px"></el-table-column>
        <el-table-column prop="ksthsj"
                         label="开始通话时间"
                         width="160px"
                         sortable
                         :formatter="row => new Date(row.ksthsj).toLocaleString()"></el-table-column>
        <el-table-column
            prop="cjsj"
            label="外呼日期"
            width="150px"
            sortable
            :formatter="row => new Date(row.cjsj).toLocaleDateString()">
        </el-table-column>

<!--        <el-table-column label="操作" width="140px">-->
<!--          <el-button type="danger">删除</el-button>-->
<!--        </el-table-column>-->
      </el-table>

    </div>
  </div>


</template>

<script setup>
import {onMounted, reactive, ref, watchEffect} from "vue";
import request from "@/utils/request";
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
dayjs.extend(duration);

//格式化时长
const formatDuration = (seconds) => {
  if(seconds === 0) {
    return '0';
  }
  const duration = dayjs.duration(seconds, 'seconds');

  if(duration.asDays() >= 1) {
    return duration.format('D[天] HH[时] mm[分] ss[秒]');
  }
  else if(duration.asHours() >= 1) {
    return duration.format('HH[时] mm[分] ss[秒]');
  }
  else if(duration.asMinutes() >= 1) {
    return duration.format('mm[分] ss[秒]');
  }
  else {
    return duration.format('ss[秒]');
  }
};




const state = reactive({
  searchCriteria : {
    sjhm: null,
    callid: null,
    zdybq: null,
    hmmd5: null,
    qssj: null,
    jssj: null
  },
  tableData:[]
})

const dateTime = ref(null)
const defaultTime = [
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
]

//监听dateTime的变化
watchEffect(() => {
  if (dateTime.value) {
    state.searchCriteria.qssj = dateTime.value[0];
    state.searchCriteria.jssj = dateTime.value[1];
  } else {
    state.searchCriteria.qssj = undefined;
    state.searchCriteria.jssj = undefined;
  }
});



//查询后台数据
const load = () => {
  console.log(state.searchCriteria.zdybq)
  request.post("/callrecord/find",state.searchCriteria).then(res=>{
    state.tableData = res.data
    console.log(res.data)
  });
};

onMounted(() => {
  load();
});


</script>


<style>

</style>